<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    strong{
      display: inline-block;
      width: 120px;
      height: 100px;
      border-radius: 50%;
      background: pink;

      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
    <div id="app">
        <v-a></v-a>
        <v-b></v-b>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
  Vue.config.productionTip = false;

  //$bus: 总线
  Vue.prototype.$bus = new Vue()

  Vue.component("v-a",{
      template:"<strong @click='sendData'>v-a</strong>",
      data(){return {msg:"msg from v-a"}},
      methods:{
          sendData(){
            this.$bus.$emit("sendData",this.msg)
          }
      }
  });

  Vue.component("v-b",{
      template:"<strong>{{msg}}</strong>",
      data(){return {msg: "v-b"}},
      mounted(){
          this.$bus.$on("sendData",(msg)=>{this.msg = msg})
      }
  });

  new Vue({
    el:"#app"
  })
</script>
</html>